<template>
  <view class="viewport">
    <fui-nav-bar
      background="#0052D9"
      title="筛选"
      color="#fff"
      @leftClick="leftClick"
    >
      <fui-icon color="#fff" name="arrowleft"></fui-icon>
    </fui-nav-bar>

    <view class="warp">
      <view class="ul">
        <view class="li">
          <fui-input
            v-model="formData.applyTitle"
            label="报修主题"
            borderTop
            placeholder="请输入"
          ></fui-input>
          <fui-input
            v-model="formData.deviceName"
            label="设备名称"
            :bottomLeft="0"
            placeholder="请输入"
          ></fui-input>
          <fui-input
            v-model="formData.deviceCode"
            label="设备编号"
            :bottomLeft="0"
            placeholder="请输入"
          ></fui-input>
          <fui-input
            v-model="formData.storageLocation"
            label="存放位置"
            :bottomLeft="0"
            placeholder="请输入"
          ></fui-input>
          <fui-input
            v-model="formData.repairLevel"
            label="紧急程度"
            :bottomLeft="0"
            placeholder="请选择"
            disabled
          >
            <fui-icon
              :size="50"
              name="arrowright"
              @click="show = true"
            ></fui-icon>
          </fui-input>
          <fui-input
            v-model="formData.applyDateStart"
            label="开始时间"
            :bottomLeft="0"
            placeholder="请选择"
            disabled
          >
            <fui-icon
              :size="50"
              name="arrowright"
              @click="showB = true"
            ></fui-icon>
          </fui-input>
          <fui-input
            v-model="formData.applyDateEnd"
            label="结束时间"
            :bottomLeft="0"
            placeholder="请选择"
            disabled
          >
            <fui-icon
              :size="50"
              name="arrowright"
              @click="showC = true"
            ></fui-icon>
          </fui-input>
          <fui-input
            v-model="formData.applyUser"
            label="提交人"
            :bottomLeft="0"
            placeholder="请输入"
          ></fui-input>
        </view>
      </view>
      <fui-picker
        :options="options"
        :show="show"
        @change="change"
        @cancel="cancel"
      ></fui-picker>
      <up-calendar
        :show="showB"
        :mode="mode"
        @confirm="confirm"
        @close="showB = false"
      ></up-calendar>
      <up-calendar
        :show="showC"
        :mode="mode"
        @confirm="confirmC"
        @close="showC = false"
      ></up-calendar>
    </view>
    <view class="footer">
      <view class="reset" @click="reset">重置</view>
      <view class="reset confirm" @click="handleConfirm">确定</view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";

const leftClick = () => {
  uni.navigateBack();
};

// 表单数据
const formData = ref({
  applyTitle: "", // 报修主题
  deviceName: "", // 设备名称
  deviceCode: "", // 设备编号
  storageLocation: "", // 存放位置
  repairLevel: "", // 紧急程度
  applyDateStart: "", // 开始时间
  applyDateEnd: "", // 结束时间
  applyUser: "", // 提交人
});

// 紧急程度
const show = ref(false);
const options = ref(["全部", "紧急", "高", "中", "低"]);

// 时间选择器
const mode = ref("single");
const showB = ref(false);
const showC = ref(false);

const change = (e) => {
  show.value = false;
  formData.value.repairLevel = e.value;
  console.log("formData after change:", formData.value);
};

const confirm = (e) => {
  formData.value.applyDateStart = e["0"];
  showB.value = false;
  console.log("formData after confirm:", formData.value);
};

const confirmC = (e) => {
  formData.value.applyDateEnd = e["0"];
  showC.value = false;
  console.log("formData after confirmC:", formData.value);
};

const cancel = () => {
  show.value = false;
};

// 重置
const reset = () => {
  Object.assign(formData.value, {
    applyTitle: "",
    deviceName: "",
    deviceCode: "",
    storageLocation: "",
    repairLevel: "",
    applyDateStart: "",
    applyDateEnd: "",
    applyUser: "",
  });
};

// 确认按钮点击事件
const handleConfirm = () => {
  console.log("发送的筛选数据：", formData.value);
  // 返回上一页并传递数据
  uni.navigateBack({
    delta: 1,
    success: function () {
      // 确保发送的是最新的数据，不包含status
      const filterData = {
        applyTitle: formData.value.applyTitle,
        deviceName: formData.value.deviceName,
        deviceCode: formData.value.deviceCode,
        storageLocation: formData.value.storageLocation,
        repairLevel: formData.value.repairLevel,
        applyDateStart: formData.value.applyDateStart,
        applyDateEnd: formData.value.applyDateEnd,
        applyUser: formData.value.applyUser,
      };
      uni.$emit("filterData", filterData);
    },
  });
};
</script>

<style lang="scss" scoped>
page {
  height: 100%;
}
.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.warp {
  flex: 1;
}
.footer {
  display: flex;
  .reset {
    width: 50%;
    display: flex;
    height: 100rpx;
    align-items: center;
    justify-content: space-around;
    border: 1rpx solid #ccc;
    color: #0052d9;
  }

  .confirm {
    color: #fff;
    background-color: #0052d9;
  }
}
</style>
